import React from 'react'
import ReactMarkdown, { Components } from 'react-markdown'
import remarkGfm from 'remark-gfm'
import rehypeRaw from 'rehype-raw'
import { UserCard } from './UserCard'
// import { WebCustomElementComponent } from './WebCustomElement'

interface MarkdownRendererProps {
  content: string
}

type CustomComponents = Partial<
  {
    [key: string]: React.ComponentType<any>
  } & Components
>

const MarkdownRenderer: React.FC<MarkdownRendererProps> = ({ content }) => {
  // 自定义组件映射
  const components: CustomComponents = {
    // 处理自定义HTML元素 - 使用小写标签名
    usercard: ({ node, ...props }) => {
      // 使用类型断言确保node.properties有正确的类型
      const attrs = (node?.properties as Record<string, string>) || {}
      return (
        // 在 Markdown 中编写的 <UserCard> 标签在 HTML 中会被自动转换为小写形式 <usercard>
        <UserCard
          name={attrs.name}
          role={attrs.role}
        />
      )
    },
    // 处理 web component元素
    // 'web-custom-element': ({ node, ...props }) => {
    //   return (
    //     <WebCustomElementComponent {...props} />
    //   )
    // }
  }

  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm]}
      rehypePlugins={[rehypeRaw]}
      components={components as Components}
    >
      {content}
    </ReactMarkdown>
  )
}

export default MarkdownRenderer
